<template>
  <div class="container">
        <h1>航天科工合同监管应用平台管理系统</h1>
        <div class="input-wrapper" :class="{'active':showColor}">
            <input type="text" placeholder="请输入用户名" @focus="showColor=true" @blur="showColor=false" v-model="username">
        </div>
        <div class="input-wrapper" :class="{'active':showColor2}">
            <input type="password" placeholder="请输入密码"  @focus="showColor2=true" @blur="showColor2=false" v-model="password">
        </div>
        <div class="btn">登录</div>
  </div>
</template>

<script>
export default {
  name: 'Jkcj',
  data () {
    return {
        showColor:false,
        showColor2:false,
        username:"",
        password:""
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
    width:600px;
    background:#fff;
    box-shadow:6px 3px 13px 0px #ccc;
    margin:180px auto 0;
    padding:60px 0;
}
h1{
    text-align:center;
    margin-bottom:30px;
}
.input-wrapper{
    width:300px;
    height:52px;
    margin:0px auto 30px;
    border:1px solid #ccc;
}
.input-wrapper input{
    height:50px;
    line-height:50px;
    padding:0 5px;
    border:0 none;
    outline:0 none;
    font-size:14px;
}
.input:focus{
    outline:0 none;
}
.active{
    border-color:rgb(80,108,251)
}
.btn{
    font-size:14px;
    width:300px;
    height:45px;
    line-height:45px;
    background:rgb(80,108,251);
    color:#fff;
    text-align:center;
    margin:0 auto;
    cursor:pointer;
}
</style>